<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例5</title>
    <style>
        .one{
            border: 1px solid red;
            color:red;
            text-align: center;
            text-decoration: underline;
        }
        .two{
            border: 1px solid blue;
            color:blue;
            text-align: center;
            text-decoration: line-through;
        }
    </style>
    <script>
        let flag = true
        function changeClassName(){
            const title = document.getElementById("title");
            if(flag) {
                title.className = "one"
            }else{
                title.className = "two"
            }
            flag = !flag
        }

        function clearClass(){
            const title = document.getElementById("title");
            title.className = ""
        }

        function show(){
            const title = document.getElementById("title");
            const color = document.defaultView.getComputedStyle(title,null).color
            console.log(color)
        }
    </script>
</head>
<body>
    <h2 id="title">示例5</h2>
    <button onclick="changeClassName()">点击</button>
    <button onclick="clearClass()">清除样式</button>
    <button onclick="show()">打印标题的颜色</button>
</body>
</html>